<template>
	<view>
		<topic-info :info="info"></topic-info>
		<divider></divider>
		<view class="p-2 flex align-center border-bottom" v-for="(item, index) in hotList" :key="index" hover-class="bg-light">
			<text class="iconfont icon-QQ text-main"></text>
			<text class="font text-drak text-ellipsis">{{ item.title }}</text>
		</view>
		<divider></divider>
		<!-- tab -->

		<view class="flex align-center">
			<view
				class="flex-1  flex align-center justify-center"
				:class="tabBarIndex === index ? 'font-lg text-main font-weight-bold ' : 'font-md'"
				v-for="(item, index) in tabBars"
				:key="index"
				@click="changeBar(index)"
			>
				{{ item.name }}
			</view>
		</view>

		<!-- 列表 -->
		<template v-if="listData.length > 0">
			<block v-for="(item, index) in listData" :key="index">
				<common-list :item="item" :index="index"></common-list>
				<divider></divider>
			</block>
			<loadmore :loadmore="loadtext"></loadmore>
		</template>
		<template v-else>
			<no-thing></no-thing>
		</template>
	</view>
</template>

<script>
import topicInfo from '../../components/topic-detail/topic-info.vue';
import divider from '../../components/common/divider.vue';
import commonList from '../../components/common/common-list.vue';
import noThing from '../../components/common/no-thing.vue';
import loadmore from '../../components/common/loadmore.vue';
var demoData = [
	{
		username: '昵称',
		userpic: '/static/default.jpg',
		isFollow: true,
		newstime: '2019-11-11 下午 4:30',
		title: '我是标题',
		titlepic: '/static/demo/datapic/1.jpg',
		support: {
			type: '',
			support_count: 0,
			unsupport_count: 0
		},
		comment_count: 0,
		share_num: 0
	},
	{
		username: '昵称',
		userpic: '/static/default.jpg',
		isFollow: true,
		newstime: '2019-11-11 下午 4:30',
		title: '我是标题',
		titlepic: '/static/demo/datapic/1.jpg',
		support: {
			type: '',
			support_count: 0,
			unsupport_count: 0
		},
		comment_count: 0,
		share_num: 0
	},
	{
		username: '昵称',
		userpic: '/static/default.jpg',
		isFollow: true,
		newstime: '2019-11-11 下午 4:30',
		title: '我是标题',
		titlepic: '/static/demo/datapic/1.jpg',
		support: {
			type: '',
			support_count: 0,
			unsupport_count: 0
		},
		comment_count: 0,
		share_num: 0
	}
];
export default {
	components: {
		topicInfo,
		divider,
		commonList,
		noThing,
		loadmore
	},
	data() {
		return {
			info: {
				cover: '/static/demo/topicpic/1.jpeg',
				title: '#话题名称#',
				desc: '话题描述：',
				today_count: 23,
				news_count: 3
			},

			hotList: [
				{
					title: '【3/5最新消息】金主爸爸来了……'
				},
				{
					title: '【3/5最新消息】金主爸爸来了……'
				},
				{
					title: '【3/5最新消息】金主爸爸来了……'
				}
			],
			list1: [],
			loadtext1: '上拉加载更多',
			list2: [],
			loadtext2: '上拉加载更多',

			tabBarIndex: 0,
			tabBars: [
				{
					name: '默认'
				},
				{
					name: '最新'
				}
			]
		};
	},
	computed: {
		//当前列表数据
		listData() {
			return this.tabBarIndex === 1 ? this.list2 : this.list1;
		},
		loadtext() {
			return this.tabBarIndex === 1 ? this.loadtext2 : this.loadtext1;
		}
	},
	onReachBottom() {
		console.log('上拉加载更多——————');
		
		this.handleloadmore()
	
	},

	onLoad(e) {
		this.list1 = demoData;
		this.list2 = [];
	},
	methods: {
		follow() {},
		onSupport() {},
		changeBar(index) {
			this.tabBarIndex = index;
		},
		handleloadmore() {
			//拿到当前的索引

			let index = this.tabBarIndex;
		
			if (this.loadtext !== '上拉加载更多') return;
		
			this['loadtext' + (this.tabBarIndex + 1)] = '正在加载中';
			
			setTimeout(()=>{
					this['list' + (this.tabBarIndex + 1)]= [...this['list' + (this.tabBarIndex + 1)],...this['list' + (this.tabBarIndex + 1)]]
				
				
				this['loadtext' + (this.tabBarIndex + 1)] = '上拉加载更多';
			},2000)

			// 请求数据
		}
	}
};
</script>

<style></style>
